<template>
  <div class="forgot-password-box">
    <div class="top-box">
      <div class="box">
        <div class="left">
          <div class="safePromise"></div>
        </div>
        <div class="right" @click="goLogin">
          <i class="el-icon-user-solid"></i>您好，请登录
        </div>
      </div>
    </div>
    <div class="logo-box">
      <!-- <img src="@/assets/images/logo.png" alt /> -->
      <img :src='loginPng' alt />
    </div>
    <div class="content-box">
      <div class="page-title">
        <div class="left-color"></div>
        <div class="title">忘记密码 <span>/ FIND PASSWORD</span></div>
      </div>
      <div class="step-box">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="1、填写手机号"></el-step>
          <el-step title="2、验证手机号"></el-step>
          <el-step title="3、重新设置密码"></el-step>
          <el-step title="4、完成"></el-step>
        </el-steps>

        <div class="phone-box" v-if="active === 0">
          <el-form
            :model="phoneForm"
            :rules="phoneRules"
            label-width="100px"
            size="medium"
            ref="phoneForm"
          >
            <el-form-item label="手机号" prop="phone">
              <el-input
                placeholder="请输入手机号"
                v-model="phoneForm.phone"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="testCode">
              <div class="inner-box">
                <el-input
                  placeholder="请输入验证码"
                  v-model="phoneForm.testCode"
                  clearable
                ></el-input>
                <!-- 找回密码框 -->
                <div class="random-box">
                  <RandomNumber
                    ref="randomNum"
                    @getIdentifyCode="getIdentifyCode"
                  />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button
                size="medium"
                type="primary"
                @click="phoneNext('phoneForm')"
                >下一步</el-button
              >
            </el-form-item>
            <el-form-item label="">
              <div>
                <p>温馨提示：</p>
                <p>1、填写手机号必须已经注册</p>
                <p>2、短信发送可能会延迟，请耐心等待</p>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="phone-box code-box" v-if="active === 1">
          <el-form
            :model="codeForm"
            :rules="codeRules"
            label-width="100px"
            size="medium"
            ref="codeForm"
            @submit.native.prevent
          >
            <div class="code-tip">
              短信已发送至您的手机，请输入短信中的验证码，此服务免费。
            </div>
            <el-form-item label="手机号码">
              <span class="red">{{ commonFun.showSecretPhone(alreadyPhone) }}</span>
            </el-form-item>
            <el-form-item label="验证码" prop="phoneCode">
              <el-input
                placeholder="请输入验证码"
                v-model="codeForm.phoneCode"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button
                size="medium"
                type="primary"
                @click="codeNext('codeForm')"
                >验证</el-button
              >
            </el-form-item>
            <el-form-item label="">
              <div>
                <p v-if="!showPeople">
                  如果手机号无法收到验证码，请点此
                  <!-- <span @click="toPeople" class="red people">申请人工处理</span> -->
                  <a class="red people" href="https://qiaochu.s2.udesk.cn/im_client/?web_plugin_id=9667" target="_blank"
                  > 联系客服
                </a>
                </p>
                <p v-else>
                  已通知客服，请耐心等待。如有疑问，请拨打400-877-0039
                </p>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="phone-box password-box" v-if="active === 2">
          <el-form
            :model="passwordForm"
            :rules="passwordRules"
            label-width="100px"
            size="medium"
            ref="passwordForm"
          >
            <el-form-item label="手机号码">
              <span class="red">{{ commonFun.showSecretPhone(alreadyPhone) }}</span>
            </el-form-item>

            <el-form-item label="设置密码" prop="newPassword">
              <el-input
                placeholder="请设置密码"
                v-model="passwordForm.newPassword"
                clearable
                :type="newShow ? 'text' : 'password'"
              >
                <i
                  slot="suffix"
                  @click="viewIconClick('new')"
                  :class="[
                    'el-input__icon hand-show ',
                    newShow ? 'el-icon-minus' : 'el-icon-view',
                  ]"
                  v-if="passwordForm.newPassword.length > 0"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="new-password">
                <div class="password-strong">
                  <div class="password-strong-item">
                    <div
                      :class="
                        passwordForm.newPassword.length >= 6 ? 'strong' : 'grey'
                      "
                    ></div>
                    <div class="strong-text">弱</div>
                  </div>
                  <div class="password-strong-item">
                    <div
                      :class="
                        passwordForm.newPassword.length >= 10
                          ? 'strong'
                          : 'grey'
                      "
                    ></div>
                    <div class="strong-text">中等</div>
                  </div>
                  <div class="password-strong-item">
                    <div
                      :class="
                        passwordForm.newPassword.length > 14 ? 'strong' : 'grey'
                      "
                    ></div>
                    <div class="strong-text">强</div>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="重复密码" prop="againPassword">
              <el-input
                placeholder="请再次输入密码"
                v-model="passwordForm.againPassword"
                clearable
                :type="againShow ? 'text' : 'password'"
              >
                <i
                  slot="suffix"
                  @click="viewIconClick('again')"
                  :class="[
                    'el-input__icon hand-show ',
                    againShow ? 'el-icon-minus' : 'el-icon-view',
                  ]"
                  v-if="passwordForm.againPassword.length > 0"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="medium"
                type="primary"
                @click="passwordNext('passwordForm')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <div class="phone-box success-box" v-if="active === 3">
          <div class="success-tip">
            <i class="el-icon-success"></i>
            恭喜您密码设置成功，您可以使用新密码重新登录
          </div>
          <div>
            您的手机号： <span class="red">{{ commonFun.showSecretPhone(alreadyPhone) }}</span>
          </div>
          <div>
            <el-button size="medium" type="primary" @click="goLogin"
              >马上登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <NavFooter />
    </div>
  </div>
</template>

<script>
import RandomNumber from "./components/RandomNumber.vue";
import NavFooter from "@/components/layout/NavFooter.vue";
import { checkPhone } from "@/utils/common";
import {
  smsSendCaptcha,
  smsCheckCaptcha,
  userResetPassword,
} from "@/api/member/index";
import loginPng from '@/assets/images/logo.png';
export default {
  name: "Home",
  components: {
    RandomNumber,
    NavFooter,
  },
  data() {
    return {
      loginPng: loginPng,
      active: 0,
      idIdentifyCode: "",
      alreadyPhone: "",
      showPeople: false,
      phoneForm: {
        phone: "",
        testCode: "",
      },
      phoneRules: {
        phone: [
          { required: true, message: "请输入手机号" },
          {
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        testCode: [{ required: true, message: "请填写验证码" }],
      },
      codeForm: {
        phoneCode: "",
      },
      codeRules: {
        phoneCode: [{ required: true, message: "请输入您收到的6位验证码" }],
      },
      passwordForm: {
        newPassword: "",
        againPassword: "",
      },
      newShow: false,
      againShow: false,
      passwordRules: {
        newPassword: [
          { required: true, message: "请设置密码" },
          { min: 6, max: 18, message: "请输入6-18个字符" },
        ],
        againPassword: [
          { required: true, message: "请再次输入密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.passwordForm.newPassword) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("domainInfo"))?.homeLogo ) {
      this.loginPng =  JSON.parse(localStorage.getItem("domainInfo")).homeLogo
    }
  },
  methods: {
    // 小眼睛查看密码
    viewIconClick(type) {
      if (type === "new") {
        this.newShow = !this.newShow;
      } else if (type === "again") {
        this.againShow = !this.againShow;
      }
    },
    //  去登陆
    goLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    // 获得前台验证码
    getIdentifyCode(value) {
      this.idIdentifyCode = value;
    },
    // 填写手机号 下一步
    phoneNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.idIdentifyCode !== this.phoneForm.testCode.toLowerCase()) {
            this.$message({
              type: "error",
              message: "验证码填写错误，请重新填写",
            });
            return;
          }

          // 发送短信 --------接口-----  sendFlag: 是否需验证当前手机号是用户
          smsSendCaptcha({ mobile: this.phoneForm.phone, sendFlag: 1 })
            .then((res) => {
              if (res.code == 200) {
                // 记录填写的手机号
                this.alreadyPhone = this.phoneForm.phone;
                this.active = 1;
                this.$refs.randomNum.createdCode();
              }
            })
            .catch((err) => {
              this.$refs.randomNum.createdCode();
            });
        }
      });
    },
    // 申请人工处理
    toPeople() {
      // 联系客服
      this.showPeople = true;
    },
    // 验证码 下一步
    codeNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active = 2;
          // 验证 接口
          smsCheckCaptcha({
            mobile: this.alreadyPhone,
            captcha: this.codeForm.phoneCode,
          }).then((res) => {
            if (res.code == 200) {
              this.active = 2;
            }
          });
        }
      });
    },

    // 密码下一步
    passwordNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交密码 ---- 接口
          userResetPassword({
            password: this.passwordForm.newPassword,
            mobile: this.alreadyPhone,
          }).then((res) => {
            if (res.code == 200) {
              this.active = 3;
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.forgot-password-box {
  background-color: #eff1f5;
  min-height: 100vh;
}

.top-box {
  background: #000;
  color: #ffffff;

  .box {
    min-width: 1460px;
    height: 40px;
    line-height: 40px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .safePromise {
      color: #eb5405;
      font-size: 16px;
    }
    .right {
      cursor: pointer;
    }
  }
}
.logo-box {
  width: 80%;
  margin: 0 auto 10px;
  background-color: #fff;
  padding: 10px 0 10px 10px;
  img {
    max-height: 80px;
  };
}
.content-box {
  width: 80%;
  height: calc(100vh - 390px);
  min-height: 463px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 20px;

  .page-title {
    padding: 10px 0 10px 0;
    font-size: 22px;
    line-height: 50px;
    display: flex;
    .left-color {
      height: 50px;
      width: 5px;
      background-color: #f88123;
      margin-right: 12px;
    }
    .title {
      span {
        font-size: 14px;
      }
    }
  }

  .step-box {
    .red {
      color: red;
    }
    .people {
      cursor: pointer;
    }
    .phone-box {
      width: 45%;
      margin: 0 auto;
      padding: 50px 0;
    }
    .code-box {
      .code-tip {
        margin: 20px 0;
        padding-left: 34px;
      }
    }
    .success-box {
      div {
        margin: 20px 0;
      }
      .success-tip {
        color: #f88123;
        font-size: 22px;
        margin: 35px 0;
      }
    }

    .inner-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .random-box {
        border: 1px solid #efefef;
        border-radius: 1px;
        margin: 0 0 0 20px;
      }
    }
    .password-box {
      .new-password {
        .password-strong {
          display: flex;
          justify-content: flex-end;
          .password-strong-item {
            display: flex;
            flex-direction: column;
            text-align: center;
            margin-left: 10px;

            .strong {
              width: 35px;
              height: 6px;
              border-radius: 3px;
              background: #f88123;
            }
            .grey {
              width: 35px;
              height: 6px;
              border-radius: 3px;
              background: #f5f7fa;
            }
            .strong-text {
              font-size: 10px;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}

.hand-show {
  cursor: pointer;
}
</style>
